{include file='admin/header.html'}

<div style="padding: 15px;">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>{$tran.upload}</legend>
    </fieldset>
    
    <div class="layui-upload">
        <button type="button" class="layui-btn layui-btn-normal" id="testList">{$tran.choice_multi_file}</button>
        <div class="layui-upload-list">
            <table class="layui-table">
                <thead>
                    <tr>
                        <th>{$tran.file_name}</th>
                        <th>{$tran.preview}</th>
                        <th>{$tran.size}</th>
                        <th>{$tran.status}</th>
                        <th>{$tran.option}</th>
                    </tr>
                </thead>
                <tbody id="demoList"></tbody>
            </table>
        </div>
        <button type="button" class="layui-btn" id="testListAction">{$tran.start_upload}</button>
    </div>
</div>

<script>
    layui.use(['upload'], function () {
        var upload = layui.upload,
            $ = layui.jquery;

        //多文件列表示例
        var demoListView = $('#demoList'),
            uploadListIns = upload.render({
                elem: '#testList',
                url: '{$site_url}/{$lang}/admin/media/upload.html', //改成您自己的上传接口
                size: '{$setting.upload_size}',
                exts: '{$setting.upload_type}',
                data: {},
                multiple: true,
                auto: false,
                bindAction: '#testListAction',
                choose: function (obj) {
                    var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                    //读取本地文件
                    obj.preview(function (index, file, result) {
                        var tr = $(['<tr id="upload-' + index + '">', '<td>' + file.name + '</td>', '<td>' + ((/\.(gif|jpg|jpeg|png|bmp|webp|psd|svg|tiff)$/gi.test(file.name)) ? ('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">') : file.name) + '</td>', '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>', '<td>{$tran.await_upload}</td>', '<td>', '<button class="layui-btn layui-btn-xs demo-reload layui-hide">{$tran.re_upload}</button>', '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">{$tran.delete}</button>', '</td>', '</tr>'].join(''));

                        //单个重传
                        tr.find('.demo-reload').on('click', function () {
                            obj.upload(index, file);
                        });

                        //删除
                        tr.find('.demo-delete').on('click', function () {
                            delete files[index]; //删除对应的文件
                            tr.remove();
                            uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                        });

                        demoListView.append(tr);
                    });
                },
                done: function (res, index, upload) {
                    if (res.files && res.files.file) { //上传成功
                        var tr = demoListView.find('tr#upload-' + index),
                            tds = tr.children();
                        tds.eq(3).html('<span style="color: #5FB878;">{$tran.upload_success}</span>');
                        tds.eq(4).html(''); //清空操作
                        return delete this.files[index]; //删除文件队列已经上传成功的文件
                    }
                    this.error(index, upload);
                },
                error: function (index, upload) {
                    var tr = demoListView.find('tr#upload-' + index),
                        tds = tr.children();
                    tds.eq(3).html('<span style="color: #FF5722;">{$tran.upload_fail}</span>');
                    tds.eq(4).find('.demo-reload').removeClass('layui-hide'); //显示重传
                }
            });
    });
</script>

{include file='admin/footer.html'}